<template>
  <div class="rightMiddle">
    <div class="headerMaintitle">
      <img class="topPic" src="../assets/rightBottom3.png" alt="" />
      <div class="headerText">标题1</div>
    </div>
    <div class="row">
      <div>
        <div id="bot2chart" class="bot2chart"></div>
        <p class="sub">合格/全部 <span>0/0</span></p>
      </div>

      <div>
        <div class="content blue">
          <p class="title">水厂总数</p>
          <p class="num">22</p>
        </div>
        <div class="content yellow">
          <p class="title">日总供水量(m³)</p>
          <p class="num">22</p>
        </div>
        <div class="content blue">
          <p class="title">日总耗电量 (Kwh)</p>
          <p class="num">22</p>
        </div>
        <div class="content yellow">
          <p class="title">吨水电耗 (Kwh/m³)</p>
          <p class="num">22</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "RightMiddle",
  props: {},
  components: {},
  data() {
    return {
      cList: [],
      list: [],
      index: 0,
      timer: null,
      isEmpty: false,
      companys: [
        { name: "COD正常率", percent: 97 },
        { name: "氨氮正常率", percent: 91 },
        { name: "总磷正常率", percent: 82 },
        { name: "总氮正常率", percent: 70 },
        { name: "ph正常率", percent: 80 },
      ],
    };
  },
  computed: {},
  watch: {},
  methods: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    const chart = this.$echarts.init(document.getElementById("bot2chart"));
    const option = {
      graphic: [
        {
          type: "text",
          style: {
            text: "水质合格率",
            textAlign: "center",
            fill: "#ffffff",
            fontSize: 22,
          },
          left: "center",
          top: "50%",
        },
      ],
      color: [
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#00D2FF", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#F0FF00", // 100% 处的颜色员工疫苗
            },
          ],
          global: false, // 缺省为 false
        },
      ],
      series: [
        {
          type: "gauge",
          radius: "96%",
          center: ["50%", "40%"],
          startAngle: 245,
          endAngle: -65,
          progress: {
            show: true,
            width: 15,
          },
          detail: {
            valueAnimation: true,
            width: "60%",
            lineHeight: 40,
            borderRadius: 8,
            offsetCenter: [0, "-10%"],
            fontSize: 36,
            fontWeight: "bolder",
            color: "#00F8FD",
            formatter: "{value}%",
          },
          min: 0,
          max: 100,
          data: [{ value: 90 }],
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          pointer: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              width: 15,
              color: [[1, "#212652"]],
            },
          },
          axisTick: {
            show: false,
          },
        },
        {
          // 中心圆弧
          type: "gauge",
          radius: "70%",
          center: ["50%", "40%"],
          startAngle: 180,
          endAngle: 0,
          data: [{ value: 1 }],
          max: 1,
          detail: {
            show: false,
          },
          progress: {
            show: true,
            width: 2,
          },
          itemStyle: {
            color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                offset: 0,
                color: "#ffffff00",
              },
              {
                offset: 0.2,
                color: "#F0FF00",
              },
              {
                offset: 0.8,
                color: "#00D2FF",
              },
              {
                offset: 1,
                color: "#ffffff00",
              },
            ]),
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          pointer: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              width: 2,
              color: [[1, "#2A7CF600"]],
            },
          },
          axisTick: {
            show: false,
          },
        },
      ],
    };
    chart.setOption(option);
  },
  updated() {},

  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
};
</script>
<style lang="less" scoped>
.bot2chart {
  width: 250px;
  height: 310px;
  margin: 40px 40px 0 20px;
}
.sub {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 22px;
  color: #ffffff;
  line-height: 32px;
  position: relative;
  left: -10px;
  top: -20px;
  span {
    font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
    font-weight: 600;
    font-size: 38px;
    color: #27c0fd;
    line-height: 53px;
    margin-left: 30px;
  }
}
.row {
  padding: 0px 28px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  .content {
    text-align: center;
    width: 340px;
    height: 85px;
    margin: 14px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("../assets/box7.png");
    background-size: 100% 100%;
    .title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 19px;
      color: #9bdef0;
      line-height: 27px;
    }
    .num {
      font-family: DINAlternate, DINAlternate;
      font-weight: bold;
      font-size: 26px;
      color: #00f1ff;
      line-height: 30px;
      margin-top: 11px;
    }
    p {
      margin: 0;
    }
  }
}
</style>
